import React, { useState, useEffect } from 'react';
import { Table, message } from 'antd';
import { Pagination } from '@/components';
import { history } from 'umi';
import moment from 'moment/moment';
import { getOperateCon } from '../../../../services/task';
// import { getActionItem } from '../../../../utils/utils';

const ChangeRec = ({ location, activeKey, refreshComp }) => {
    const { query: urlQuery } = location;

    const [loading, setLoading] = useState(false);
    const [pagination, setPagination] = useState({});
    const [list, setList] = useState([]);
    const numIndex = index => {
        const num = (pagination.current - 1) * pagination.pageSize + index + 1;
        return num;
    };
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render(text, record, index) {
                return numIndex(index);
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            key: 'taskName',
            render: (text, record) => (
                <div style={{ maxWidth: '300px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                    <span
                        title={record.taskName}
                        style={{ color: '#ffa808', cursor: 'pointer' }}
                        onClick={() => {
                            history.push({
                                pathname: '/work/task/changeRecDetail',
                                query: {
                                    id: urlQuery.id,
                                    operateId: record.id
                                },
                                state: { tabRoute: true, tabRefresh: true }
                            });
                        }}
                    >
                        {record.taskName}
                    </span>
                </div>
            )
        },
        {
            title: '操作项',
            dataIndex: 'operateName',
            key: 'operateName'
        },
        {
            title: '操作时间',
            dataIndex: 'operateTime',
            key: 'operateTime',
            render: (text, record) => <span>{moment(record.operateTime).format('YYYY-MM-DD HH:mm')}</span>
        },
        {
            title: '是否经审核',
            dataIndex: 'hasAudit',
            key: 'hasAudit',
            render: text => <span>{text === true ? '是' : '否'}</span>
        },
        {
            title: '审核结果',
            dataIndex: 'auditResult',
            key: 'auditResult'
        },

        {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            render: text => <span>{text ? moment(text).format('YYYY-MM-DD HH:mm') : ''}</span>
        }
    ];

    const fetchSubtask = async () => {
        setLoading(true);
        const params = {
            taskId: urlQuery.id,
            pageSize: pagination.pageSize || 10,
            pageNo: pagination.current || 1
        };
        const result = await getOperateCon(params);

        if (result.code === 10000) {
            const { data = {} } = result;
            const { ...rest } = data;
            setPagination({ ...rest, current: rest.pageNo });
            setList(data.rows || []);
        } else {
            message.error(result.msg);
        }
        setLoading(false);
    };
    /* 表格翻页获取数据 */
    const handleTableChange = async page => {
        const isSetPagination = page !== undefined;

        if (isSetPagination) {
            setPagination({ ...pagination, ...page });
        }
    };

    useEffect(() => {
        if (activeKey === 'changeRec') {
            fetchSubtask();
        }
    }, [pagination.pageSize, pagination.current, activeKey, refreshComp]);

    return (
        <div>
            <Table
                loading={loading}
                defaultExpandAllRows
                columns={columns}
                rowKey="id"
                scroll={{ x: 'max-content' }}
                dataSource={list}
                onChange={handleTableChange}
                pagination={false}
            />
            <Pagination {...pagination} onChange={handleTableChange} />
        </div>
    );
};

export default ChangeRec;
